import React, {useEffect, useRef, useState} from 'react';
import {Button, Col, Form, Modal, Row, Toast} from '@douyinfe/semi-ui';
import {addStudent, editStudent, getBuRoom, getClasses, getClassJson} from "../../../../api/api.js";
import {IconEdit, IconPlus, IconUserAdd} from "@douyinfe/semi-icons";


function StudentEform(props) {
    const [visible, setVisible] = useState(false);
    const [trdata,settrdata] = useState(null)
    const [list,setlist] = useState([ { value: 'abc', label: '请先选择学院', otherKey: 0 }])
    const [list3,setlist3] = useState(0)
    useEffect(()=>{
        setTimeout(() => {
            getjsonlist()
            console.log(props)
            if (api.current) {
                api.current.setValues(props.mess);
                api.current.setValue("sex","")
            }
        }, 0);

    },[visible])

    async function handleChange(val){
        const res = await getClasses()
        console.log(res)
        setlist(res.data.data)
    }
    async function getjsonlist(){
        const res = await getClassJson()
        settrdata(res.data.data)
    }
    async function getBuRom(v) {
        let form = new FormData()
        form.append("sex",v)
        const res = await getBuRoom(form)
        setlist3(res.data.data)
    }
    const showDialog = () => {
        setVisible(true);
    };
    const handleOk = () => {
        setVisible(false);
        console.log('Ok button clicked');
    };
    const handleCancel = () => {
        setVisible(false);
        console.log('Cancel button clicked');
    };
    const handleAfterClose = () => {
        console.log('After Close callback executed');
    };
    const list2 = [
        { value: '1', label: '男',  },
        { value: '0', label: '女'},
    ];
    function change3(v) {
        api.current.setValue("room",v[1])
    }
    async function sub() {
        console.log(api.current.getValues())
        const res = await editStudent(api.current.getValues())
        if (res.data.code==200){
            Toast.success('学生修改成功')
            handleOk()
        }else {
            Toast.success('学生修改失败')
            handleOk()
        }
    }
    const api = useRef();
    function valte() {
        api.current.validate()
            .then(values=>{
                sub()
            })
            .catch(errors=>{
                Toast.error("请重新填写表单")
            })
    }

    return (
        <>
            {/*<Button onClick={showDialog} icon={<IconPlus />}>添加学生</Button>*/}
            <Button onClick={showDialog} icon={<IconEdit />} theme='solid' type='primary' >修改学生</Button>
            <Modal
                okText={'Sounds great!'}
                style={{width:"30%",height:"51%"}}
                title={<div><IconUserAdd  style={{marginRight:"10px"}} />修改学生</div>}
                visible={visible}
                onOk={handleOk}
                afterClose={handleAfterClose} //>=1.16.0
                onCancel={handleCancel}
                closeOnEsc={true}
                footer={
                    <div style={{textAlign:'center'}}>
                        <Button type="primary" onClick={()=>{valte()}}>
                            提交
                        </Button>
                    </div>

                }
            >

                <Row>
                    <Form
                        getFormApi={formApi=>api.current = formApi}
                        onSubmit={values => Toast.info({content: JSON.stringify(values)})}
                    >
                        <>
                            <Row>
                                <Col span={11}>
                                    <Form.Input
                                        rules={[
                                            { required: true, message: '' },
                                            { type: 'string', message: '请输入汉字' },
                                            { validator: (rule, value) => value != null, message: '姓名不能为空' },
                                        ]}
                                        label={'姓名'} field='name' placeholder='请输入姓名'/>
                                </Col>
                                <Col span={11} offset={1}>
                                    <Form.Input
                                        rules={[
                                            { required: true, message: '' },
                                            { validator: (rule, value) => value != null, message: '手机号不能为空' },
                                        ]}
                                        label={'手机号'} field='phone' placeholder='请输入手机号'/>
                                </Col>
                            </Row>
                            <Row>
                                <Col span={11}>
                                    <Form.Input
                                        rules={[
                                            { required: true, message: '' },
                                            { type: 'string', message: '请输入字符串' },
                                            { validator: (rule, value) => value != null, message: '密码不能为空' },
                                        ]}
                                        label={'密码'} field='password' placeholder='请输入密码'/>
                                </Col>
                                <Col span={11} offset={1}>
                                    <Form.Cascader
                                        placeholder="请选择学院/系/专业/班级"
                                        treeData={trdata}
                                        field='area'
                                        label='学院/系/专业/班级'
                                        onChange={(v)=>{handleChange(v)}}
                                        style={{width:'100%'}}
                                        rules={[
                                            { required: true, message: '' },
                                            { validator: (rule, value) => value != null, message: '请选择学院/系/专业/班级' },
                                        ]}
                                    >
                                    </Form.Cascader>
                                </Col>
                            </Row>
                            <Row>
                                <Col span={11}>
                                    <Form.Select
                                        rules={[
                                            { required: true, message: '' },
                                            { validator: (rule, value) => value != null, message: '请选择性别' },
                                        ]}
                                        onChange={(v)=>{getBuRom(v)}} optionList={list2} field={'sex'} label={'性别'} placeholder="请选择性别" style={{ width: '100%' }}>
                                    </Form.Select>
                                </Col>
                                <Col span={11} offset={1}>
                                    <Form.Input
                                        rules={[
                                            { required: true, message: '' },
                                            { validator: (rule, value) => value != null, message: '学号不能为空' },
                                        ]}
                                        label={'学号'} field='studentid' placeholder='请输入学号'/>
                                </Col>
                            </Row>
                            <Row>
                                <Col span={11}>
                                    <Form.Cascader
                                        rules={[
                                            { required: true, message: '' },
                                            { validator: (rule, value) => value != null, message: '请选择寝室楼' },
                                        ]}
                                        onChange={(v)=>{change3(v)}} treeData={list3} field={'builder'} label={'寝室楼'} placeholder="请选择寝室楼" style={{ width: '100%' }}>
                                    </Form.Cascader>
                                </Col>
                                <Col span={11} offset={1}>
                                    <Form.Input
                                        rules={[
                                            { required: true, message: '' },
                                            { validator: (rule, value) => value != null, message: '请选择寝室' },
                                        ]}
                                        disabled={true} label={'寝室'} field='room' placeholder='请选择寝室'/>
                                </Col>
                            </Row>
                        </>

                    </Form>
                </Row>
            </Modal>
        </>
    );
}
export default StudentEform


